<script setup>
	import { get, post, setBaseApi, api } from '@/api/http';
	import { ref, watch } from 'vue';
	import { showConfirmDialog, closeDialog } from 'vant';
	import useBuriedPoint from '@/hooks/useBuriedPoint';
	import { useRouter } from 'vue-router';
	const router = useRouter();

	//useBuriedPoint();

	setBaseApi(api + '/front-order/visitOrder/');

	const statusTabs = [
		{
			status: 0,
			label: '待使用',
		},
		{
			status: 1,
			label: '已完成',
		},
		{
			status: 4,
			label: '已取消',
		},
		{
			status: 2,
			label: '已过期',
		},
	];

	const currentStatus = ref(null);

	watch(currentStatus, (status) => getOrderList(status));

	const orderList = ref([]);

	const getOrderList = (orderStatus) => {
		get('getMyOrderList', { orderStatus }).then((list) => {
			orderList.value = list || [];
		});
	};

	currentStatus.value = 0;

	// 取消订单
	const handleCancelOrder = ({ id }) => {
		showConfirmDialog({
			title: '提示',
			message: '确认取消此订单？',
			confirmButtonColor: '#d35400',
		})
			.then(() => {
				post('cancelYyOrder', { orderId: id }, '订单取消').then(() => {
					currentStatus.value = 4;
					closeDialog();
				});
			})
			.catch(() => {
				closeDialog();
			});
	};

	// 使用订单
	const handleUseOrder = ({ id }) => {
		router.push({ path: '/orderDetail', query: { id } });
	};
</script>

<template>
	<section class="min-h-full p-15px bg-#f3f3f3 text-4">
		<van-tabs
			v-model:active="currentStatus"
			background="transparent"
		>
			<van-tab
				class="mt-20px p-x-15px"
				v-for="{ label, status } in statusTabs"
				:key="status"
				:title="label"
				:name="status"
			>
				<div
					v-if="orderList.length"
					class="bg-white rounded-10px mb-10px"
					v-for="v in orderList"
					:key="v.id"
				>
					<header class="p-20px flex-x-between border-bottom">
						<span class="font-bold text-5">{{ v.venuesName }}</span>
						<span class="text-gray-6">{{ v.orderType ? '团队预约' : '个人预约' }}</span>
					</header>
					<main class="p-20px flex-x-between">
						<article class="leading-8 text-4">
							<p>{{ v.ticketName }}</p>
							<p>下单时间：{{ v.commitDate }}</p>
							<p>入馆时段：{{ v.startDate }}-{{ v.endDate }}</p>
						</article>

						<img
							v-if="v.orderStatus"
							class="w-100px h-80px"
							:src="require(`@/assets/images/orderStatus-${v.orderStatus}.png`)"
							alt=""
						/>
					</main>
					<footer
						class="flex-x-between p-15px pt-0"
						v-show="!currentStatus"
					>
						<van-button
							@click="handleCancelOrder(v)"
							type="default"
							>取消预约</van-button
						>
						<van-button
							@click="handleUseOrder(v)"
							type="success"
							>去使用</van-button
						>
					</footer>
				</div>

				<div
					v-else
					class="flex-col-center"
				>
					<img
						class="w-50%"
						src="@/assets/images/empty.png"
						alt=""
					/>
					<p class="text-4 mt-20px text-gray">暂无数据</p>
				</div>
			</van-tab>
		</van-tabs>
	</section>
</template>

<style lang="less" scoped>
	// :deep(.van-popup--center) {
	// 	width: 100%;
	// }
</style>
